<div class="page">


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Typography</h2>
            <p class="lead">To support all languages worldwide, Google recommends using Roboto for languages that use the Latin, Greek, and Cyrillic scripts and Noto for all other languages.</p>
        </div>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-md-4">
                    <p>Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic</p>
                </div>
                <div class="col-md-8">
                    <img src="images/assets/style_typography_roboto1.png" alt="" class="img-responsive">
                </div>
            </div>
        </div>

    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Headings</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-10">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <table class="table table-demo no-margin">
                                <tr>
                                    <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
                                    <td class="type-info">Semibold 36px</td>
                                </tr>
                                <tr>
                                    <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
                                    <td class="type-info">Semibold 30px</td>
                                </tr>
                                <tr>
                                    <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
                                    <td class="type-info">Semibold 24px</td>
                                </tr>
                                <tr>
                                    <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
                                    <td class="type-info">Semibold 18px</td>
                                </tr>
                                <tr>
                                    <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
                                    <td class="type-info">Semibold 14px</td>
                                </tr>
                                <tr>
                                    <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
                                    <td class="type-info">Semibold 12px</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Body</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Paragraph</div>
                                <div class="panel-body">
                                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Lead body</div>
                                <div class="panel-body">
                                    <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Marked text</div>
                                <div class="panel-body">
                                    You can use the mark tag to <mark>highlight</mark> text.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Deleted text</div>
                                <div class="panel-body">
                                    <del>This line of text is meant to be treated as deleted text.</del>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Strikethrough text</div>
                                <div class="panel-body">
                                    <s>This line of text is meant to be treated as no longer accurate.</s>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Inserted text</div>
                                <div class="panel-body">
                                    <ins>This is meant to be treated as an addition to the document.</ins>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Underlined text</div>
                                <div class="panel-body">
                                    <u>This line of text will render as underlined</u>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Small text</div>
                                <div class="panel-body">
                                    <small>This line of text is meant to be treated as fine print.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Bold</div>
                                <div class="panel-body">
                                    <strong>rendered as bold text</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Italics</div>
                                <div class="panel-body">
                                    <em>rendered as italicized text</em>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Alignment classes</div>
                                <div class="panel-body">
                                    <p class="text-left">Left aligned text.</p>
                                    <p class="text-center">Center aligned text.</p>
                                    <p class="text-right">Right aligned text.</p>
                                    <p class="text-justify">Justified text.</p>
                                    <p class="text-nowrap">No wrap text.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Addresses</div>
                                <div class="panel-body">
                                    <address>
                                        <strong>Twitter, Inc.</strong><br>
                                        795 Folsom Ave, Suite 600<br>
                                        San Francisco, CA 94107<br>
                                        <abbr title="Phone">P:</abbr> (123) 456-7890
                                    </address>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Transformation classes</div>
                                <div class="panel-body">
                                    <p class="text-lowercase">Lowercased text.</p>
                                    <p class="text-uppercase">Uppercased text.</p>
                                    <p class="text-capitalize">Capitalized text.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Abbreviations</div>
                                <div class="panel-body">
                                    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr></p>
                                    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Blockquote</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <h5 class="text-center">Left</h5>
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                <small>Someone famous</small>
                            </blockquote>
                            <h5 class="text-center">Right</h5>
                            <blockquote class="pull-right">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                <small>Someone famous</small>
                            </blockquote>
                            <div class="panel-label">Normal</div>
                        </div>
                    </div>            
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body panel-labeled">
                            <h5 class="text-center">Left</h5>
                            <blockquote class="blockquote-colored">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                <small>Someone famous</small>
                            </blockquote>
                            <h5 class="text-center">Right</h5>
                            <blockquote class="blockquote-colored pull-right">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                <small>Someone famous</small>
                            </blockquote>
                            <div class="panel-label">Colored</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Dropcap & Highlight</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body panel-labeled">
                            <p><span class="dropcap">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Eadignissimos nobis facere esse neque atque quos assumenda fugiat libero.</p>
                            <p><span class="dropcap colored">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores laboriosam, dignissimos libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem ipsum dolor sit amet. Ea, ipsa in, laboriosam, dignissimos nobis quaerat vitae a facere esse neque .</p>
                            <div class="panel-label">Dropcap</div>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body panel-labeled">
                            <p>Opsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quam, soluta, quia mollitia sequi voluptas magnam perspiciatis deleniti <span class="ui-highlight">ratione ad molestias eum</span> minima sed libero enim laborum sunt vel porro. Lorem ipsum dolor sit amet Eum, voluptas, placeat provident impedit<strong> maiores</strong> odio doloribus corrupti exercitationem veritatis ipsum ipsam adipisci quis consequatur assumenda rerum corporis possimus ad architecto</p>
                            <p>Dolor sit amet, consectetur adipisicing elit. Ipsam <span class="ui-highlight colored">consectetur adipisicing</span> elit. dolores accusantium inventore expedita ipsum quod dolore repellat porro laudantium necessitatibus, saepe aut ab, aspernatur, reprehenderit qui provident neque quibusdam doloremque.</p>
                            <div class="panel-label">Highlight</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Lists</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Unordered</div>
                                <div class="panel-body">
                                    <ul>
                                        <li>Lorem ipsum dolor sit amet</li>
                                        <li>Consectetur adipiscing elit</li>
                                        <li>Integer molestie lorem at massa</li>
                                        <li>Facilisis in pretium nisl aliquet</li>
                                        <li>Nulla volutpat aliquam velit
                                            <ul>
                                                <li>Phasellus iaculis neque</li>
                                                <li>Purus sodales ultricies</li>
                                                <li>Vestibulum laoreet porttitor sem</li>
                                                <li>Ac tristique libero volutpat at</li>
                                            </ul>
                                        </li>
                                        <li>Faucibus porta lacus fringilla vel</li>
                                        <li>Aenean sit amet erat nunc</li>
                                        <li>Eget porttitor lorem</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Ordered</div>
                                <div class="panel-body">
                                    <ol>
                                        <li>Lorem ipsum dolor sit amet</li>
                                        <li>Consectetur adipiscing elit</li>
                                        <li>Integer molestie lorem at massa</li>
                                        <li>Facilisis in pretium nisl aliquet</li>
                                        <li>Nulla volutpat aliquam velit</li>
                                        <li>Faucibus porta lacus fringilla vel</li>
                                        <li>Aenean sit amet erat nunc</li>
                                        <li>Eget porttitor lorem</li>
                                        <li>Faucibus porta lacus fringilla vel</li>
                                        <li>Aenean sit amet erat nunc</li>
                                        <li>Eget porttitor lorem</li>
                                        <li>Nulla volutpat aliquam velit</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Unstyled</div>
                                <div class="panel-body">
                                    <ul class="list-unstyled">
                                        <li>Lorem ipsum dolor sit amet</li>
                                        <li>Consectetur adipiscing elit</li>
                                        <li>Integer molestie lorem at massa</li>
                                        <li>Facilisis in pretium nisl aliquet</li>
                                        <li>Nulla volutpat aliquam velit
                                            <ul>
                                                <li>Phasellus iaculis neque</li>
                                                <li>Purus sodales ultricies</li>
                                                <li>Vestibulum laoreet porttitor sem</li>
                                                <li>Ac tristique libero volutpat at</li>
                                            </ul>
                                        </li>
                                        <li>Faucibus porta lacus fringilla vel</li>
                                        <li>Aenean sit amet erat nunc</li>
                                        <li>Eget porttitor lorem</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Inline</div>
                                <div class="panel-body">
                                    <ul class="list-inline">
                                        <li>Lorem ipsum</li>
                                        <li>Phasellus iaculis</li>
                                        <li>Nulla volutpat</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Description</div>
                                <div class="panel-body">
                                    <dl>
                                        <dt>Description lists</dt>
                                        <dd>A description list is perfect for defining terms.</dd>
                                        <dt>Euismod</dt>
                                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                        <dt>Malesuada porta</dt>
                                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="panel panel-default panel-minimal">
                                <div class="panel-heading">Horizontal description</div>
                                <div class="panel-body">
                                    <dl class="dl-horizontal">
                                        <dt>Description lists</dt>
                                        <dd>A description list is perfect for defining terms.</dd>
                                        <dt>Euismod</dt>
                                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                        <dt>Malesuada porta</dt>
                                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                        <dt>Felis euismod semper eget lacinia</dt>
                                        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
